<template>
    <div id="msg" >
        <BackHeader :header="Header"></BackHeader>
        <div class="bg">
            <img :src="msgs.imgs" class="img-rounded">
            <h6 class="hh1"><img src="../../assets/img/7.png" class="img-circle">{{msgs.publish_man}}</h6>
            <hr class="hr1" />
            <div class="hh">
            <h5><strong><center>{{msgs.title}}</center></strong></h5>
            <h6><strong class="iconfont icon-dingwei"></strong> {{msgs.address}}</h6>
            <h6><strong>大学生优惠：</strong>{{msgs.sell}}</h6>
            <h6><strong>攻略：</strong><br>　　{{msgs.content}}</h6>
            <br>
            
            <div class="time">
            {{msgs.publish_time}}
            </div>
            <div class="row bg2">
            <div class="SC col-8 mt10" v-if="open" @click="collect"><ins>收藏</ins></div>
            <div class="DSC col-8 mt10" v-if="!open" @click="Dcollect"><ins>取消收藏</ins></div>
            <div class=" col-4 mt10 iconfont icon-xihuan2" v-if="!zan" @click="Zan"> {{msgs.like}}</div>
            <div class="LIKE col-4 mt10 iconfont icon-xihuan2" v-if="zan" @click="Yzan"> {{msgs.like}}</div>
            </div>
            </div>
            <hr class="hr2" />
            <strong class="hh">攻略评论</strong>
            <br><br>
            <div v-if="WU"><center>暂无评论，快来评论一下吧！</center></div>
            <br><br>
            <div v-for="(item,index) in comment" :key="index">
                <li class="msg">
                    <div style="height:70%">
                        <p class="msg_stuName"><b>{{item.from}}</b></p>
                        <sup class="msg_time">{{item.time}}</sup>
                    </div>
                    <div style="height:30%">
                        <p class="msg_context">{{item.context}}</p>
                        <div class="msg_del" @click="DEL(index)" v-if="DD"><ins>删除</ins></div>
                       </div>
                </li>
            </div>
            <br>
            <div class="pinglun">
                <form class="form-inline">
                    <div  class="col-8 mt10 pll">
                        <input type="text" class="form-control" v-model="context" placeholder="说点什么吧......">
                    </div>
                    <div class="col-4 mt10">
                    <button type="button" class="btn btn-primary" @click="PL">评 论</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>
<script>
import BackHeader from "../../components/Header/BackHeader.vue";
import CommonProvider from "@/providers/CommonProvider";
import MemberCenterProvider from "@/providers/MemberCenterProvider";
import { MessageBox } from "mint-ui";
import { Toast } from "mint-ui";
export default {
  name: "xiangqing",
  data() {
    return {
      Header: "详情",
      msgs: [],
      open: true,
      zan: false,
      comment: [],
      context: "",
      name1: "", //发布者
      name2: "", //游客
      DD: false,
      WU: false
    };
  },
  components: {
    BackHeader
  },
  methods: {
    //删除评论
    DEL(index) {
      let data = {
        comment: this.comment[index]
      };
      CommonProvider.DelCom(data).then(res => {
        MessageBox.alert("删除成功！").then(action => {
          this.$router.go(0);
        });
      });
    },
    //初始加载数据
    MSG() {
      let data0 = {
        id: window.localStorage.getItem("main_ID")
      };
      CommonProvider.yan(data0).then(res => {
        if (res.data == "已收藏") {
          this.open = false;
        } else {
          this.open = true;
        }
      });
      let data1 = {
        id: window.localStorage.getItem("main_ID")
      };
      CommonProvider.Com(data1).then(res => {
        this.comment = res.data;
        if (res.data.length == 0) {
          this.WU = true;
        } else {
          this.WU = false;
        }
      });
      let data = {
        id: window.localStorage.getItem("main_ID")
      };
      let self = this;
      CommonProvider.Msg(data).then(res => {
        self.msgs = res.data[0];
        this.name1 = res.data[0].publish_man;
        MemberCenterProvider.checkLogin().then(res => {
          if (res.data == "未登录") {
            this.DD = false;
          } else {
            this.name2 = res.data.userName;

            if (this.name1 != this.name2) {
              this.DD = false;
            } else {
              this.DD = true;
            }
          }
        });
      });
    },
    //评论
    PL() {
      MemberCenterProvider.checkLogin().then(result => {
        if (result.data == "未登录") {
          Toast("请先登录才能评论");
        } else if (this.context == "") {
          Toast("评论不能为空！");
        } else {
          let data = {
            comment: {
              from: result.data.userName,
              goods_id: window.localStorage.getItem("main_ID"),
              context: this.context
            }
          };
          CommonProvider.comment(data).then(res => {
            MessageBox.alert("评论成功！").then(action => {
              this.$router.go(0);
            });
          });
        }
      });
    },
    //收藏
    collect() {
      MemberCenterProvider.checkLogin().then(result => {
        if (result.data == "未登录") {
          Toast("请先登录才能收藏");
        } else {
          let data2 = {
            col: {
              title: this.msgs.title,
              sell: this.msgs.sell,
              address: this.msgs.address,
              like: this.msgs.like,
              content: this.msgs.content,
              imgs: this.msgs.imgs,
              publish_man: this.msgs.publish_man,
              publish_time: this.msgs.publish_time,
              collect_man: this.name2,
              id: window.localStorage.getItem("main_ID")
            }
          };
          CommonProvider.collect(data2).then(res => {
            this.open = false;
            Toast("收藏成功！");
          });
        }
      });
    },
    //取消收藏
    Dcollect() {
      let data3 = {
        id: window.localStorage.getItem("main_ID")
      }
      CommonProvider.Dcollect(data3).then(res => {
        (this.open = true), Toast("取消收藏成功！");
      });
    },
    //点赞
    Zan() {
      let zan = {
        id: window.localStorage.getItem("main_ID"),
        Nlike:this.msgs.like += 1
      }
      CommonProvider.Zan(zan).then(res=>{
        this.zan = true;
        Toast("点赞成功！");
      })
    },
    //取消点赞
    Yzan() {
      let yzan = {
        id: window.localStorage.getItem("main_ID"),
        Nlike:this.msgs.like -= 1
      };
      CommonProvider.Zan(yzan).then(res=>{
        this.zan = false;
        Toast("取消点赞成功！");
      }) 
    }
  },
  mounted: function() {
    this.MSG();
  }
};
</script>
<style lang="scss" scoped>
.bg2 {
  margin: 0px 0px 0px 0px !important;
}
.bg {
  margin-top: 40px;
}
.img-rounded {
  width: 100%;
}
.hr1 {
  margin-top: -10px;
  width: 96%;
  height: 0px;
  border: none;
  border-top: 1px solid rgb(197, 197, 197);
}
.hh {
  margin-left: 20px;
  margin-right: 20px;
}
.hh1 {
  margin-left: 5px;
  margin-top: 3px;
}
.img-circle {
  width: 15%;
}
.msg {
  list-style-type: none;
  height: 70px;
  padding: 20px;
  border-style: none none solid none;
  border-width: 1px;
  border-color: #d3d3d3;
  margin-bottom: 40px;
}
.msg_stuName {
  color: #b28246;
  float: left;
  margin-left: 0px;
  margin-top: -5px;
}
.msg_del {
  margin-top: 0px;
  float: right;
  color: #808080;
}
.msg_time {
  margin-top: -10px;
  float: right;
  color: #808080;
}
.msg_context {
  font-size: 13px;
  float: left;
  margin-left: 40px;
  overflow: hidden;
  color: darkslategrey;
}
.pinglun {
  width: 100%;
  position: fixed;
  bottom: 5px;
  margin-left: 15px;
}
.time {
  font-size: 12px;
  color: #808080;
}
.SC {
  color: blue;
}
.DSC {
  color: red;
}
.LIKE {
  color: red;
}
</style>